{% extends "wiki/doctype/wiki_page/templates/wiki_page.html" %}

{%- block head_include %}
{{ super() }}
{{ include_style('wiki.bundle.css') }}

{{ include_style('contributions.bundle.css') }}

{% endblock -%}


{% block page_content %}
<div>
	<input class="d-none" autocomplete="off" type="text" name="limit" value="{{contributions|length}}">

	<div class='contributions-header'> {{pilled_title}} </div>

	<div class="drafts">
		<div class="table-area">
			<div class="list-jobs table-responsive">
				{% if contributions %}
				<table class="table">
					<thead class="">
						<tr>
							<td style="width: 20%">{{ _("Status") }}</th>
							<td style="width: 30%">{{ _("Message") }}</th>
							<td style="width: 30%">{{ _("Last update on") }}</th>
							<td style="width: 20%">{{ _("Link") }}</th>
						</tr>
					</thead>
					<tbody>
						{% for j in contributions %}
						<tr>
							<td><span class="indicator-pill no-margin {{j.color}}">&nbsp;&nbsp;{{
									j.status }}</span></td>
							<td>{{ j.message }}</td>
							<td>{{ j.modified }}</td>
							<td> <a class="btn btn-default btn-xs center" href="{{ j.edit_link }}">Open Draft</a>
							</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
				{% else %}
				<div class="no-background-jobs">
					<img src="/assets/frappe/images/ui-states/list-empty-state.svg" alt="Empty State">
					<p class="text-muted">{{ _("No Drafts Made") }}</p>
				</div>
				{% endif %}

			</div>
		</div>
	</div>
	{% if contributions %}
	<br>
	<div> <button class='btn pull-right get_contributions'>More</button></div>
	<br>
	<br>
</div>

{% endif %}

{% endblock %}

{% block base_scripts %}
<script type="text/javascript" src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>

{{ include_script("frappe-web.bundle.js") }}

<script>
	if (parseInt($('[name="limit"]').val()) < 10) $('.get_contributions').hide();

	$('.get_contributions').on("click", () => {
		frappe.call({
			method: "wiki.www.drafts.get_drafts",
			args: {
				start: parseInt($('[name="limit"]').val()),
				limit: 10,
			},
			callback: (response) => {
				if (response.message) {
					for (contribution of response.message.contributions) {
						$('.list-jobs tbody').append($(`	<tr>
							<td class="worker-name"><span class="indicator-pill no-margin ${contribution.color}">&nbsp;&nbsp;
								${contribution.status}</span></td>
							<td>${contribution.message}</td>
							<td>${contribution.modified}</td>
							<td> <a class="btn btn-default btn-xs center" href="${contribution.edit_link}">Open Draft</a>
							</td>
						</tr>

					`))
					}
					$('[name="limit"]').val(parseInt($('[name="limit"]').val()) + response.message.contributions.length)
					if ($('[name="limit"]').val() % 10 !== 0) $('.get_contributions').hide();
				}

			},
			freeze: true,
		})
	});
</script>


{% endblock %}

{% block page_sidebar %}
{% endblock %}